import { ref, onMounted, onUnmounted, nextTick } from "vue";

const useListenerMouseWheel = (tabContainerBoxId, tabBarId) => {
  const isShow = ref(false);
  const handleScroll = e => {
    const direction = e.deltaY > 0 ? "0" : "1";
    const tabBar = document.getElementById(tabBarId);
    if (direction === "0") {
      tabBar.scrollLeft += 30;
    } else {
      tabBar.scrollLeft -= 30;
    }
  };
  const listenerContainerOver = async () => {
    await nextTick();
    const tabBar = document.getElementById(tabBarId);
    const tabContainerBox = document.getElementById(tabContainerBoxId);
    isShow.value = tabBar.scrollWidth > tabContainerBox.clientWidth;
  };

  onMounted(() => {
    const tabBar = document.getElementById(tabBarId);
    tabBar.addEventListener("wheel", handleScroll, { passive: true }); // 监听滚轮滚动事件
    window.addEventListener("resize", listenerContainerOver);
    listenerContainerOver();
  });
  onUnmounted(() => {
    const tabBar = document.getElementById(tabBarId);
    tabBar.removeEventListener("wheel", handleScroll);
    window.removeEventListener("resize", listenerContainerOver);
  });

  return isShow;
};
export default useListenerMouseWheel;
